<template>
  <div class="comment-input-bar flex items-start gap-2">
    <img :src="userAvatar" class="w-8 h-8 rounded-full object-cover mt-0.5" />
    <div class="flex-1">
      <div class="bg-white rounded-xl border border-slate-200 shadow px-2 py-1 flex items-center gap-1">
        <input
          v-model="inputValue"
          :placeholder="placeholder"
          class="flex-1 outline-none border-none bg-transparent text-base h-8 leading-8 px-1"
          :disabled="loading"
          @keyup.enter="submit"
        />
        <div class="flex gap-0.5">
          <span v-for="emo in emojis" :key="emo" class="cursor-pointer text-lg hover:bg-slate-100 rounded p-0.5" @click="inputValue+=emo">{{ emo }}</span>
        </div>
        <el-button type="primary" size="small" class="ml-1" :loading="loading" @click="submit">发布</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  modelValue: String,
  userAvatar: String,
  placeholder: { type: String, default: '理性发言，友善互动' },
  loading: Boolean,
  emojis: { type: Array, default: () => ['😀','😋','😎','😳','😢','😡'] }
})
const emit = defineEmits(['update:modelValue', 'submit'])
const inputValue = ref(props.modelValue || '')
watch(() => props.modelValue, v => { inputValue.value = v })
function submit() {
  if (!inputValue.value.trim() || props.loading) return
  emit('submit', inputValue.value)
  inputValue.value = ''
  emit('update:modelValue', '')
}
watch(inputValue, v => emit('update:modelValue', v))
</script>
<style scoped>
.comment-input-bar { margin-bottom: 8px; }
</style> 